<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/css/bootstrap.css"> 
        <link rel="stylesheet" href="../libs/AdminLTE-2.4.18/bower_components/font-awesome/css/font-awesome.min.css"> 
        <script src="../libs/AdminLTE-2.4.18/bower_components/jquery/dist/jquery.js"></script>
        <script src="../libs/AdminLTE-2.4.18/bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../libs/sdk/date.js"></script>
        <script src="../libs/sdk/json.js"></script>
        <script src="../libs/sdk/hhls.js"></script>
        <script src="../libs/sdk/hhIotGateway.js"></script>
        <script src="../libs/sdk/kurento-client.js"></script>
        <script src="../libs/sdk/kurento-utils.js"></script>
        <script src="js/clientUtils.js"></script> 
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    
        <title>专家支持</title>

    </head>
    <body>
        <style>
            html , body , .app{ width: 100%; height: 100%; padding: 0; margin: 0; background-color: #111; color: #fafafa;}
            ul{ padding: 0; margin: 0; list-style: none;}

            .app{ position: relative; overflow: hidden;}
            #rv{ position: absolute; width:100%; height: 100%; object-fit: cover ; z-index: 99; left: 0; top: 0;}
            #lv{ position: absolute; width:20%; height: 20%; object-fit: cover ; z-index: 999; left: 0; bottom: 0; background-color: #111;}
            ul.lstBtn{ position: absolute; right: 20px; top: 50%; transform: translate(10%, -50%); z-index: 9999;}
            ul.lstVideo{ position: absolute; left: 20px; top: 50px;   z-index: 9999;}
            ul.lstVideo li{ padding: 10px 5px;  background-color: #111; text-align: center;}
            .divTitle{ position: absolute; height: 40px;line-height: 40px; padding: 0px 20px; border-radius: 20px; background-color: rgba(0,0,0,0.5); top: 20px; left: 50%; transform: translate(-50%); z-index: 9999;}


        </style> 
        <div class="app" id="pusher">  
            <video id="lv" autoplay></video> 
            <video id="rv" autoplay muted></video> 
            <ul class="lstBtn">
                <li @click="switchCamera"><i class="fa fa-refresh"></i> 切换</li>
                <li><i class="fa fa-refresh"></i> 启动</li>
                <li><i class="fa fa-refresh"></i> 停止</li>
            </ul>
            <div class="divTitle">标题</div>

            <ul class="lstVideo">
                <li
                    v-for="dv in devices" :key="dv.deviceId"  
                    :data-cid ="dv.deviceId"
                    @click="setCamera"
                >{{dv.title}}</li>
            </ul>
        </div>
        <script> 
            var app = new Vue({
                el:"#pusher",
                created(){
                    var me = this;
                    try{  
                        me.start();
                    }
                    catch(er){
                        console.log(er);
                    }
                },
                data(){
                    return { 
                        devCode:"d24",
                        clientId:['session',( new Date()).getTime() , parseInt(1000*Math.random())].join(''),
                        info:{},
                        objs:{},
                        mqClient: null ,
                        sport: null ,
                        devices:[]
                    }
                },
                methods:{
                    start(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                me.getInfo().then(()=>{
                                    return me.openMQ();
                                }).then(()=>{
                                    return me.getDevices();
                                }).then(()=>{
                                    return me.openSport();
                                }).then(()=>{
                                    return me.createSession();
                                }) 
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } , 
                    getInfo(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                me.clientId = ['session',( new Date()).getTime() , parseInt(1000*Math.random())].join('');
                                var key = "getPusherInfo";
                                var ps ={ devCode : me.devCode};
                                commClient.query(key , ps).then(res=>{ 
                                    me.info = res[0];
                                    success();
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    getDevices(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                navigator.mediaDevices.enumerateDevices().then(devs=>{
                                    var i=0;
                                    var videos = devs.filter(dev=>{
                                        dev.title = 'v'+i;
                                        i++;
                                        return dev.kind =="videoinput";
                                    });
                                    me.devices = videos;
                                    success();
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    openSport(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                commClient.openSport( me.info.appCode ).then(res=>{
                                    me.objs = res.data;
                                    console.log( me.objs);
                                    var code = "session-"+ me.info.devCode;
                                    var pushPortCode ="appPort-"+ me.info.devCode;
                                    var pullPortCode = "appPort-"+ me.info.devCode;
                                    return commClient.createSession( me.info.appCode , code , me.clientId , pushPortCode , pullPortCode)
                                }).then((res)=>{
                                    commClient.getClient().then(client=>{
                                        var kmsId = res.data.endInfo.kmsId;
                                        client.getMediaobjectById(kmsId , function(erFind , end ){
                                            endInfo = res.data;
                                            me.objs.end = end;
                                            success()
                                        })
                                    }) 
                                });
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    createSession(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{ 
                                me.$nextTick(()=>{
                                    var video = document.getElementById('lv');
                                    var opt = JSON.parse(JSON.stringify(commClient.config.kmsPeerOptions));
                                    opt.localVideo = document.getElementById('lv');
                                    opt.remoteVideo = document.getElementById('rv');
                                    var peer = commClient.config.kmsPeerTypes.sr(opt, function(erPeer){
                                        me.objs.peer = peer;                                        
                                        TCommClient.bindPeerEnd(peer , me.objs.end , function(){
                                            TCommClient.setHD(me.objs.end).then(()=>{
                                                me.objs.end.connect(me.objs.end, function(e){
                                                    success();
                                                })
                                                //success();
                                            });
                                        })
                                    })
                                })
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } ,
                    openMQ(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var onConnect = function () {
                                    console.log('open mq.' , me.clientId)
                                }
                                var onDisConnect = function () {}
                                var onRecMsg = function (msgData) {
                                    console.log(msgData);
                                }
                                commClient.openMq( me.clientId , onConnect , onDisConnect , onRecMsg).then(mqc=>{
                                    me.mqClient = mqc;
                                    success();
                                });
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    }  ,
                    switchCamera(){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var peer = me.objs.peer;
                                TCommClient.switchCamera(peer)
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    }  ,
                    setCamera(event){
                        var me = this;
                        return new Promise((success, faild)=>{
                            try{
                                var peer = me.objs.peer;
                                var cId = event.currentTarget.dataset.cid;
                                TCommClient.setCamera(peer , cId);
                            }
                            catch(er){
                                console.log(er);
                                success();
                            }
                        })
                    } 
                }

            })
        </script>
    </body>
</html>